<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<style>
    .container {
        width: 360px;
        height: 277px;
        margin: 100px auto;
    }

    .tab {
        display: flex;
    }

    .button {
        height: 35px;
        width: 58px;
        flex-grow: 1;



    }

    .button.active {
        height: 33px;

        background-color: #fff;





    }

    .tab-content {
        width: 360px;
        height: 241px;
        position: relative;
    }

    .tab-content-item {

        width: 100%;
        height: 100%;
        line-height: 241px;
        text-align: center;

        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }

    .tab-content-item.active {
        display: block;

    }
</style>

<body>

    <div class="container">

        <div class="tab">
            <button class="button active"> 选项卡1</button>
            <button class="button  "> 选项卡2</button>
            <button class="button  "> 选项卡3</button>

        </div>


        <div class="tab-content">
            <div class="tab-content-item active" style="background-color: aliceblue;">
                <p>选项卡1的内容</p>
            </div>
            <div class="tab-content-item" style="background-color: aqua;">
                <p>选项卡2的内容</p>
            </div>
            <div class="tab-content-item" style="background-color: azure;">
                <p>选项卡3的内容</p>
            </div>



        </div>


    </div>


    <div>

        <div class="box">
            <p>dsdsa</p>
            <span>dsasdf</span>
            <a href="dasvadsf"></a>
        </div>











        <script>

            var btn = document.querySelectorAll("button");
            var content = document.querySelectorAll(".tab-content-item");


            for (var i = 0; i < btn.length; i++) {
                btn[i].addEventListener("mouseover", change)
            }

            function change() {
                clearActive();

                this.classList.add("active");



                var index = getIndex(btn, this);
                hideContent();

                content[index].style.display = "block";




            }

            function clearActive() {
                for (var i = 0; i < btn.length; i++) {
                    btn[i].classList.remove("active");

                }


            }

            function getIndex(arr, data) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == data) {
                        return i;
                    }
                }
                reurn - 1;


            }

            function hideContent() {
                for (var i = 0; i < content.length; i++) {
                    content[i].style.display = "none";
                }
            }


            console.log()




            function getEL(str) {

                return document.querySelector(str);


            }




            console.log(getEL('.box').children);
            console.log(getEL('.box').firstChild);
            console.log(getEL('.box').lastChild);
            console.log(getEL('.box').nextSibling);
            console.log(getEL('.box').previousSibling);
            console.log(getEL('.box').parentNode);
            console.log(getEL('.box').childNodes);
            console.log(getEL('.box').children);
            console.log(getEL('.box').firstElementChild);
            console.log(getEL('.box').lastElementChild);
            console.log(getEL('.box').nextElementSibling);
            console.log(getEL('.box').previousElementSibling);











        </script>

</body>

</html>